<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="动检通智慧云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>
    <link rel="stylesheet" href="/webjars/js/layui/css/layui.css" media="all">
    <title>牧中畜牧业大数据智慧云平台V1.0</title>


</head>
<body>
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(1)"/>


<!--平台管理菜单-->
<div id="topnav" th:replace="djt/partial/topnav :: topnav(8)"></div>


<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="djt/partial/low_left :: nav(41)"/>

    <div class="container-fluid" id="pcont">
        <!--<div class="page-head">-->
        <!--<h3>生产记录</h3>-->
        <!--</div>-->


        <div class="row">
            <div class="col-md-12">
                <div class="block-flat">
                    <div class="header"><h3>授权审核</h3></div>
                    <div class="content">
                        <div class="table-responsive">
                            <div id="datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">

                                <div class="row">

                                    <!-- search-->

                                    <div style="white-space: nowrap">

                                        <span style="margin-left: 50px">   区域:
                                            <select class="select2" style="max-width: 120px;" onchange="showfactory()" id="city">

                                                <option value="全部">所有区域</option>
                                                <span th:each="cityAreaDto :${cityAreaDtoList}">
                                                    <optgroup th:label="${cityAreaDto.city}">
                                                        <span th:each="region :${cityAreaDto.regions}">
                                                            <option th:value="${region}" th:text="${region}">
                                                                南漳县
                                                            </option>
                                                        </span>
                                                    </optgroup>
                                                </span>

                                            </select>
                                        </span>

                                        <span style="margin-left: 50px">   案由:
                                            <select class="select2" style="max-width: 100px;"> <option value="-1">所有案由</option> </select>
                                        </span>

                                        <span style="margin-left: 50px">   来源:
                                            <select class="select2" style="max-width: 160px;"> <option value='-1' selected>所有来源</option> </select>
                                        </span>

                                        <span style="margin-left: 50px">   案件类型:
                                            <select class="select2" style="max-width: 160px;"> <option value='-1' selected>所有类型</option> </select>
                                        </span>

                                        <span style="margin-left: 50px">
                                                <button class="btn btn-primary" onclick="SearchBtn()">查询</button>
                                        </span>

                                        <span style="margin-right:50px;">
                                                <button th:if="${userProfile!=null}" class="btn btn-primary"  >增加养殖场</button>
                                        </span>


                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">

                                            <!-- Table -->
                                            <table id="jqGrid"></table>
                                            <div id="jqGridPager"></div>

                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript" src="/webjars/js/jquery.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="/webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="/webjars/js/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var PostDatas = {
        };
    $(document).ready(function () {

        App.init();


        //grid 根据请求返回值,自动创建表格
        $("#jqGrid").jqGrid({
            url: '/djt/pollcelow/borrowRecord',
            postData: PostDatas,//请求参数 数组格式 此时是空值
            mtype: "GET",
            styleUI: 'Bootstrap',
            datatype: "json",
            autowidth: true,
            colModel: [
                {label: '序号', name: 'id', key: true, width: 100, align: 'center'},
                {label: '<span style="text-align: center">案由</span>', name: 'cause_action', width: 200, align: 'center'},
                {label: '<span style="text-align: center">申请人</span>', name: 'borrower', width: 100, align: 'center'},
                {label: '<span style="text-align: center">申请时间</span>', name: 'created_at', width: 150,formatter: ShowDate,  align: 'center'},
                {label: '<span style="text-align: center">状态</span>', name: 'status', width: 150,formatter: showStatus, align: 'center'},
                {label: '<span style="text-align: center">有效期</span>', name: 'borrow_end_date', width: 100,formatter: ShowDate,  align: 'center'},
                {label: '<span style="text-align: center">备注</span>', name: 'remark', width: 100, align: 'center'},
                {label: '<span style="text-align: center">操作</span>', width: 200, formatter: showOpertator, align: 'center'},
                /*
                 {label: '<span style="text-align: center">操作</span>', width: 200, formatter: ShowOpertator, align: 'center'}
                 */
            ],
            viewrecords: true,
            align: 'center',
            height: 350,
            rowNum: 20,
            pager: "#jqGridPager"
        });


    });


    // 时间格式转换
    function ShowDate(cellvalue, options, rowObject) {

        var timestamp4 = new Date(cellvalue);
        var dt = timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8);
        return dt;
    }

    // 状态
    function showStatus(status, options, rowObject) {
        switch (Number(status)){
            case 0:
                return "未审批";
                break;
            case 1:
                return "通过借阅";
                break;
            case -1:
                return "未通过借阅";
                break;
        }
    }

    //操作
    function showOpertator(cellvalue, options, rowObject) {
        var link;
        var row = JSON.stringify(rowObject);
        link = "<button type='button' class='btn btn-default' id='" + row + "' onclick='select(this.id)'>详细信息</button><button type='button' class='btn btn-default' id='" + row + "' onclick='update(this.id)'>审批</button>";
        return rowObject.id == -1 ? "" : link;
    }

    //操作: 显示详情
    function select(data) {
        var json = JSON.parse(data);
        var status=showStatus(json.status,null,null);
        var start_date=ShowDate(json.borrow_date,null,null);
        var end_date=ShowDate(json.borrow_end_date,null,null);
        var created_at=ShowDate(json.created_at,null,null);
        layui.use(['laypage', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;
            layer.open({
                type: 2,
                skin: 'layui-layer-lan',
     //         shadeClose: true, //点击遮罩关闭
                area: ['800px', '600px'],
                content: ['/djt/pollcelow/select', 'no'],
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']];

                    //在body中用id锁定一个div, 然后用text()方法改变其中的值;
                    body.find("#borrower").text(json.borrower);//名字
                    body.find("#borrow_date").text(start_date);//开始时间
                    body.find("#borrow_end_date").text(end_date);//结束时间
                    body.find("#status").text(status);//状态
                    body.find("#created_at").text(created_at);//创建时间
                    body.find("#remark").text(json.remark);//备注
                }
            });

        });
    }



    //操作: 审批(更改)
    function update(data) {
        var json = JSON.parse(data);
        var status=showStatus(json.status,null,null);
        var start_date=ShowDate(json.borrow_date,null,null);
        var end_date=ShowDate(json.borrow_end_date,null,null);
        var created_at=ShowDate(json.created_at,null,null);
        layui.use(['laypage', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;
            layer.open({
                type: 2,
                // skin: 'layui-layer-lan',
                area: ['1200px', '500px'],
                title:'更改信息',
                content: ['/djt/pollcelow/update', 'no'],
                btn:['确定','取消'],
                //确定按钮
                btn1: function(index, layero){
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var data= {
                        id: json.id,
                        status: body.find("input[type='radio']:checked").val(),
                        remark: body.find("#remark").val(),
                        borrow_date: body.find("#borrow_date").val(),
                        borrow_end_date: body.find("#borrow_end_date").val()
                    }
                    //修改状态 update接口
                    layer.msg('你确定审批吗？', {
                        time: 60000, //20s后自动关闭
                        btn: ['确定','取消' ],
                        btnAlign: 'c',
                        btn1:function(index, layero){
                            $.ajax({
                                url: "/djt/pollcelow/update1", //update接口
                                data:data,
                                dataType: "json",
                                success: function (data) {
                                    if (data){
                                        layer.msg('修改成功',{btn: '确定' ,time: 60000,btnAlign: 'c',area: ['150px', '100px'],
                                            btn1:function(index, layero){
                                                window.location.href="/djt/pollcelow/borrow_audit";
                                            }}) ;
                                    }else{
                                        layer.msg('修改失败',{btn: '确定' ,time: 60000,btnAlign: 'c',area: ['150px', '100px']}) ;
                                    }
                                }
                            });
                        }
                    });
                },
                /*
                 cause_action: body.find("#cause_action").val(),
                 borrower: body.find("#borrower").val(),
                 created_at: body.find("#created_at").val(),
                 status: body.find("#status").val(),
                 //                       status: json.breedFactory.status,
                 remark: body.find("#remark").val(),
                 borrow_date: body.find("#borrow_date").val(),
                 borrow_end_date: body.find("#borrow_end_date").val()
                 */
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    body.find("#borrower").text(json.borrower);//名字
                    body.find("#cause_action").text(json.cause_action);//案由
                    body.find("#borrow_date").text(start_date);//开始时间
                    body.find("#borrow_end_date").text(end_date);//结束时间
                    body.find("#status").text(status);//状态
                    body.find("#created_at").text(created_at);//创建时间
                    body.find("#remark").text(json.remark);//备注
                },
            });

        });
    }


</script>


</body>
</html>
